<template>
  <div class="container">
    <!-- 收费记录 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox hasPrint" size="medium">
      <!-- 实际为水表编号查询 -->
      <el-form-item label="用户编号：">
        <el-input v-model="search.meterID" placeholder="请输入用户编号" clearable @keyup.enter.native="getSearchData">
        </el-input>
      </el-form-item>
      <el-form-item label="小区：">
        <el-select v-model="search.villageID" filterable :filter-method="villageFilter" clearable
          placeholder="请输入或选择查询小区" @focus="villageFocus">
          <el-option v-for="item in villageList" :key="item.villageID" :label="item.villageName"
            :value="item.villageID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费员：">
        <el-select v-model="search.cashierID" clearable placeholder="请选择收费员">
          <el-option v-for="(item,index) in tollCollectorList" :key="index" :label="item.name" :value="item.suid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账期：">
        <el-date-picker v-model="search.period" type="month" value-format="yyyy-MM" placeholder="请选择账期"
          :editable="false"></el-date-picker>
      </el-form-item>
      <el-form-item label="收费日期：">
        <el-date-picker v-model="search.startTime" value-format="yyyy-MM-dd" placeholder="开始日期" :editable="false">
        </el-date-picker>-
        <el-date-picker v-model="search.endTime" value-format="yyyy-MM-dd" placeholder="结束日期" :editable="false">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable ref="child" :tableMaxHeight="tableHeight" :tableExportPrinting="true" :tableID="tableId"
      :isTableTitle="false" :tableTitle="tableTitle" :border="tableBorder" :isIndex="true" :tableHeader="tableHeader"
      :tableData="tableData" :tableOperation="tableOperation" :tablePagination="tablePagination"
      @pageSize="pageSizeChange" @currentPage="currentPageChange" @pageOperation="handlePageOperation"
      @getTableAllData="getTableAllData" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeight: "",
        search: {
          //搜索条件
          meterID: "", //水表编号
          villageID: "", //小区ID
          cashierID: "", //收费员ID
          period: "", //账期
          startTime: "", //开始时间
          endTime: "" //结束时间
        },
        tollCollectorList: [{
            suid: 1,
            name: "石慧玲"
          },
          {
            suid: 2,
            name: "尚兰英"
          },
          {
            suid: 3,
            name: "王静婷"
          },
          {
            suid: 4,
            name: "郑 锋"
          }
        ], //收费员列表
        villageList: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表
        villageListCopy: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表原始数据
        tableId: "chargeRecord",
        tableTitle: "收费记录",
        tableBorder: true,
        tableHeader: [{
            name: "缴费编号",
            mark: "meterPayingRecordID",
            fixed: "left"
          },
          {
            // 实际为水表编号内容
            name: "用户编号",
            mark: "meterID",
            fixed: "left"
          },
          {
            name: "用户姓名",
            mark: "name",
            fixed: "left"
          },
          {
            name: "小区",
            mark: "villageName"
          },
          {
            name: "账期",
            mark: "period"
          },
          {
            name: "本期底数",
            mark: "currReadingValue"
          },
          // {
          //   name: "抵扣水量",
          //   mark: "readingFromDepositWater"
          // },
          {
            name: "用水量",
            mark: "currWaterCount"
          },
          {
            name: "水费",
            mark: "realWaterFee"
          },
          {
            name: "滞纳金",
            mark: "realLateFee"
          },
          {
            name: "水资源税",
            mark: "realTax"
          },
          {
            name: "污水费",
            mark: "realEffluentFee"
          },
          // {
          //   name: "小计",
          //   mark: "realTotalFee"
          // },
          // {
          //   name: "应收",
          //   mark: "sumPay"
          // },
          {
            name: "实收",
            mark: "realPaymentMoney"
          },
          // {
          //   name: "存入水量",
          //   mark: "depositWaterCount"
          // },
          // {
          //   name: "上期余额",
          //   mark: "lastSurplus"
          // },
          // {
          //   name: "本期余额",
          //   mark: "currSurplus"
          // },
          {
            name: "收费员",
            mark: "cashierName"
          },
          {
            name: "收费日期",
            mark: "payTime",
            width: "160"
          },
          {
            name: "操作",
            mark: "",
            width: "90",
            fixed: "right"
          }
        ],
        tableOperation: [{
          name: "取消收费",
          mark: "CancelPaying",
          icon: false
        }],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        // tableSpan: {
        //   mark: "trueUserPayingRecordID",
        //   colsIndex: [0, 1, 3, 4, 14, 15, 16, 17, 18, 19, 20, 21]
        // },
        tableData: [{
          "costTypeID": 2,
          "oddMoney": 0.0,
          "meterPayingRecordID": 1,
          "waterFee": 9.6,
          "volumeName": "\u6021\u6b23\u56ed\u5c0f\u533a",
          "tax": 0.0,
          "period": "202407",
          "inputTime": "2024-07-16 08:51:26",
          "waterRateName": "\u751f\u6d3b\u7528\u6c34",
          "amounter": "\u767d\u660e\u5e38",
          "currMeterRealPaymentMoney": 13,
          "fromAccount": 0.0,
          "operator": "\u519c\u4e1a\u94f6\u884c",
          "userPayingRecordID": 44805,
          "effluentBillStatus": 1,
          "realWaterFee": 9.6,
          "realPay": 13,
          "waterBillStatus": 1,
          "ladderFee": 0.0,
          "realLateFee": 0.0,
          "realPaymentMoney": 13,
          "billFee": 9.6,
          "other": "\u9884\u5b58\u8f6c\u5165",
          "payMoney": 13,
          "meterPayingRecordStatus": 1,
          meterID: 1,
          name: "白秀珍",
          phone: "13099046355",
          villageName: "新华书店宿舍",
          "currGiveChange": 0.0,
          "effluentFee": 3.4,
          "lrid": "",
          "realTax": 0.0,
          "readerName": "\u767d\u660e\u5e38",
          "meterLastSurplus": 0.0,
          "waterRateID": 1,
          "meterReadingRecordID": 49876,
          "realWaterCount": 4,
          "meterCurrSurplus": 0.0,
          "cashierName": "\u519c\u4e1a\u94f6\u884c",
          "costTypeName": "\u5fae\u4fe1\u652f\u4ed8",
          "totalBillFee": 13,
          "inputer": "\u51af\u5a1c",
          "payTime": "2024-07-16 14:14:49",
          "currReadingValue": 10,
          "currWaterCount": 4,
          "realOtherFee": 0.0,
          "billAndTax": 9.6,
          "currMeterRealPaymentMoenyWithoutSurplus": 13,
          "lastReadingValue": 6,
          "realEffluentFee": 3.4,
          "currManner": "\u5fae\u4fe1\u652f\u4ed8",
          "lateDays": 0
        }],
        searchAllParam: {}
      };
    },
    mounted() {
      const self = this;
      // self.getTollCollectorList();
      // self.getVillageList();
      // self.getSearchData();
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 172 - 113 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      getTollCollectorList() {
        //收费员列表
        const self = this;
        var param = {
          rid: 4
          // rid: 3
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then(res => {
          if (res.data.status === "success") {
            self.tollCollectorList = res.data.res;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getVillageList() {
        //小区列表
        const self = this;
        var param = {
          types: "village"
        };
        self.$axios.post("/service/bsSelectListGet", param).then(res => {
          if (res.data.status === "success") {
            var tmp = res.data.res;
            //小区
            self.villageList = tmp.village;
            //保留数据源
            self.villageListCopy = Object.assign(self.villageList);
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      //小区搜索
      villageFilter(txt) {
        //对绑定数据赋值
        this.villageList = this.villageListCopy.filter(item => {
          if (
            item.villageName.indexOf(txt) !== -1 ||
            item.sx.indexOf(txt) !== -1 ||
            item.qp.indexOf(txt) !== -1
          ) {
            return true;
          }
        });
      },
      //小区列表还原（当 input 获得焦点时触发）
      villageFocus() {
        this.villageList = this.villageListCopy;
      },
      getSearchData() {
        const self = this;
        self.tableData = [];
        self.tablePagination.total = 0;
        self.tablePagination.current = 1;
        self.tablePagination.size = 10;
        self.handleTableData();
      },
      handleTableData() {
        const self = this;
        var param = {
          pageNum: self.tablePagination.current,
          pageSize: self.tablePagination.size
        };
        self.searchAllParam = {}
        if (self.search.meterID) {
          param.meterID = self.search.meterID;
          self.searchAllParam.meterID = self.search.meterID;
        }
        if (self.search.villageID) {
          param.villageID = self.search.villageID;
          self.searchAllParam.villageID = self.search.villageID;
        }
        if (self.search.cashierID) {
          param.cashierID = self.search.cashierID;
          self.searchAllParam.cashierID = self.search.cashierID;
        }
        if (self.search.period) {
          param.period = self.search.period;
          self.searchAllParam.period = self.search.period;
        }
        if (self.search.startTime && self.search.endTime) {
          param.startTime = self.search.startTime;
          param.endTime = self.search.endTime;
          self.searchAllParam.startTime = self.search.startTime;
          self.searchAllParam.endTime = self.search.endTime;
        } else if (self.search.startTime || self.search.endTime) {
          self.$message.error("收费日期查询需要选择开始日期及结束日期！");
          return;
        }
        // 参数：
        self.$axios.post("/service/bsPayingRecordGetAA", param).then(res => {
          if (res.data.status === "success") {
            self.tableData = res.data.res;
            self.tablePagination.total = res.data.total;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      pageSizeChange(data) {
        const self = this;
        self.tablePagination.size = data;
        self.handleTableData();
      },
      currentPageChange(data) {
        const self = this;
        self.tablePagination.current = data;
        self.handleTableData();
      },
      handlePageOperation(row, mark) {
        if (mark == "CancelPaying") {
          //取消收费
          this.$confirm("确定要取消此收费记录吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              this.userPayingCancel(row.userPayingRecordID);
            })
            .catch(() => {});
        }
      },
      //取消收费方法
      userPayingCancel(id) {
        const self = this;
        var param = {
          userPayingRecordID: id
        };
        self.$axios.post("/service/bsUserPayingCancel", param).then(res => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.getSearchData();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getTableAllData(text) {
        var self = this;
        self.$axios
          .post("/service/bsPayingRecordGetAA", self.searchAllParam)
          .then(res => {
            if (res.data.status === "success") {
              if (text == 'export') {
                self.$refs.child.exportAllToExcel(res.data.res);
              } else if (text == 'print') {
                self.$refs.child.printAllData(res.data.res);
              }
            } else {
              self.$message.error(res.data.res);
            }
          });
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>